<template>
    <div class="gi_table_page">
      <GiTable
        title="厂商管理"
        row-key="id"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :disabled-tools="['size']"
        :disabled-column-keys="['name']"
        @refresh="search"
      >
        <template #toolbar-left>
          <a-input-search v-model="queryForm.name" placeholder="请输入厂商名称" allow-clear @search="search" />
          <a-button @click="reset">
            <template #icon><icon-refresh /></template>
            <template #default>重置</template>
          </a-button>
        </template>
        <template #toolbar-right>
          <a-button v-permission="['asset:producer:records:create']" type="primary" @click="onAdd">
            <template #icon><icon-plus /></template>
            <template #default>新增</template>
          </a-button>
          <a-button v-permission="['asset:producer:records:export']" @click="onExport">
            <template #icon><icon-download /></template>
            <template #default>导出</template>
          </a-button>
        </template>
        <template #action="{ record }">
          <a-space>
            <a-link v-permission="['asset:producer:records:get']" title="详情" @click="onDetail(record)">详情</a-link>
            <a-link v-permission="['asset:producer:records:update']" title="修改" @click="onUpdate(record)">修改</a-link>
            <a-link
              v-permission="['asset:producer:records:delete']"
              status="danger"
              :disabled="record.disabled"
              :title="record.disabled ? '不可删除' : '删除'"
              @click="onDelete(record)"
            >
              删除
            </a-link>
          </a-space>
        </template>
      </GiTable>
  
      <ProducerAddDrawer ref="ProducerAddDrawerRef" @save-success="search" />
      <ProducerDetailDrawer ref="ProducerDetailDrawerRef" />
    </div>
  </template>
  
  <script setup lang="ts">
  import ProducerAddDrawer from './ProducerAddDrawer.vue'
  import ProducerDetailDrawer from './ProducerDetailDrawer.vue'
  import { type ProducerRecordsResp, type ProducerRecordsQuery, deleteProducerRecords, exportProducerRecords, listProducerRecords } from '@/apis/asset/producer/records'
  import type { TableInstanceColumns } from '@/components/GiTable/type'
  import { useDownload, useTable } from '@/hooks'
  import { useDict } from '@/hooks/app'
  import { isMobile } from '@/utils'
  import has from '@/utils/has'
  
  defineOptions({ name: 'ProducerRecords' })
  
  const queryForm = reactive<ProducerRecordsQuery>({
    name: undefined,
    sort: ['id,desc']
  })
  
  const {
    tableData: dataList,
    loading,
    pagination,
    search,
    handleDelete
  } = useTable((page) => listProducerRecords({ ...queryForm, ...page }), { immediate: true })
  
  const columns = ref<TableInstanceColumns[]>([
    { title: '厂商名称', dataIndex: 'name', slotName: 'name' },
    { title: '地址', dataIndex: 'address', slotName: 'address' },
    { title: '厂商描述', dataIndex: 'description', slotName: 'description' },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      width: 160,
      align: 'center',
      fixed: !isMobile() ? 'right' : undefined,
      show: has.hasPermOr(['asset:producer:records:get', 'asset:producer:records:update', 'asset:producer:records:delete'])
    }
  ]);
  
  // 重置
  const reset = () => {
    queryForm.name = undefined
    search()
  }
  
  // 删除
  const onDelete = (record: ProducerRecordsResp) => {
    return handleDelete(() => deleteProducerRecords(record.id), {
      content: `是否确定删除该条数据？`,
      showModal: true
    })
  }
  
  // 导出
  const onExport = () => {
    useDownload(() => exportProducerRecords(queryForm))
  }
  
  const ProducerAddDrawerRef = ref<InstanceType<typeof ProducerAddDrawer>>()
  // 新增
  const onAdd = () => {
    ProducerAddDrawerRef.value?.onAdd()
  }
  
  // 修改
  const onUpdate = (record: ProducerRecordsResp) => {
    ProducerAddDrawerRef.value?.onUpdate(record.id)
  }
  
  const ProducerDetailDrawerRef = ref<InstanceType<typeof ProducerDetailDrawer>>()
  // 详情
  const onDetail = (record: ProducerRecordsResp) => {
    ProducerDetailDrawerRef.value?.onOpen(record.id)
  }
  </script>
  
  <style scoped lang="scss"></style>
  